<template>
	<view>
		<view class="navs" :style="{'padding-top':(statusBarTop)+'px'}">
			<uni-icons type="arrowleft" size="24" color="#545454" @click="goBack"></uni-icons>
			<text>支付成功</text>
		</view>
		<view class="pays" v-if="orderDetail && orderDetail.status && orderDetail.status == '2'">
			<view class="status">
				<image class="pay_success_icon" :src="IMGLink+'/my/pay_success_icon.png'" mode="widthFix"></image>
				<view class="price">
					¥ <text class="money">{{payprice}}</text>
				</view>
				<text>支付成功</text>
				<image class="right_img" :src="IMGLink+'/my/right_bg.png'" mode="widthFix"></image>
			</view>

			<view class="orderinfo">
				<view class="names">
					订单信息
				</view>
				<view class="order_time" @click="doCopy">
					<text>订单编号：{{orderDetail.serial_num}}</text>
					<text class="copy">复制</text>
				</view>
				<view class="order_time">
					下单时间：
					{{orderDetail.create_date}}
				</view>

				<view class="btns">
					<button class="btn" type="default" @click="goOrderDetail">查看订单详情</button>
					<button class="btn" type="default" @click="goHome">去首页看看</button>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="circle1"></view>
			<view class="circle2"></view>
			<text class="name">猜你喜欢</text>
			<view class="circle2"></view>
			<view class="circle1"></view>
		</view>
		<gusslike :likelist="likelist"></gusslike>
	</view>
</template>

<script>
	import {
		orderlist
	} from '@/api/my/orders.js';
	import {
		guessLike
	} from '@/api/shopping/shopping.js';
	import gusslike from "@/pagesA/components/gusslick.vue";
	import copyFunc from "@/utils/userCommon.js";

	export default {
		components: {
			gusslike
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				serial_num: "", //订单id
				orderDetail: {}, //订单详情
				likelist: [], //猜你喜欢
				statusBarHeight: 0,
				statusBarTop: 0,
				payprice: "", //支付金额（除去优惠券额度等）
			}
		},
		onLoad(options) {
			this.serial_num = options.serial_num;
			this.payprice = options.payprice;
			this.getDetail();
			this.guessLike();

			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButtonInfo.height;
			this.statusBarTop = menuButtonInfo.top;

			//#endif
		},
		onShow() {},
		methods: {
			// 返回上一页
			goBack() {
				copyFunc.goBack();
			},
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				orderlist('orderinfo', {
					// serial_num: "PG20210531164410166600"测试
					serial_num: this.serial_num
				}).then(res => {
					this.orderDetail = res.data;

					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			goHome() {
				uni.switchTab({
					url: `/pages/index/home/index`
				})
			},
			goOrderDetail() {
				uni.redirectTo({
					url: `/pagesA/my/orders/orderDetail?serial_num=${this.serial_num}`
				})
			},
			// 复制
			doCopy() {
				uni.setClipboardData({
					data: this.orderDetail.serial_num, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功"
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			// 猜你喜欢
			async guessLike() {
				const res = await guessLike();
				this.likelist = res.data;
			},
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import "../my.scss";

	.navs {
		width: 58%;
		@include flexLayout(center, space-between);
	}

	//#ifdef H5
	.navs {
		padding-top: 44rpx !important;
	}

	//#endif
	.pays {
		.status {
			box-sizing: border-box;
			position: relative;
			height: 328rpx;
			background-color: #F54642;
			color: #FFFFFF;
			padding: 20rpx;
			font-size: 26rpx;
			text-align: center;

			.right_img {
				width: 360rpx;
				position: absolute;
				right: 0;
				top: 0;
			}

			.pay_success_icon {
				width: 72rpx;
			}

			.price {
				font-size: 44rpx;
				font-weight: 500;

				.money {
					font-size: 70rpx;
				}
			}
		}

		.orderinfo {
			@include cards;
			background-color: #FFFFFF;
			position: relative;
			top: -68rpx;
			padding: 30rpx;

			.names {
				line-height: 52rpx;
				@include flexLayout(center, space-between);
				color: #070707;
				font-size: 30rpx;
				font-weight: 500;
			}

			.order_time {
				line-height: 64rpx;
				@include flexLayout(center, space-between);
				color: #5C5C5C;
				font-size: 26rpx;

				.copy {
					color: #F54642;
					font-size: 24rpx;
				}
			}

			.btns {
				@include flexLayout(flex-start, center);
				margin: 30rpx 0 16rpx;

				.btn {
					width: 306rpx;
					height: 82rpx;
					line-height: 82rpx;
					border-radius: 44rpx;
					border: 2rpx solid #F54642;
					color: #F54642;
					font-size: 30rpx;
					margin: 0;
					background-color: #FFFFFF;
				}

				.btn:first-child {
					margin-right: 20rpx;
				}
			}
		}

		// 猜你喜欢
		.title {
			@include flexLayout(center, center);
			color: #070707;
			font-size: 36rpx;

			.name {
				margin: 0 20rpx;
			}

			.circle1,
			.circle2 {
				border-radius: 50%;
				background-color: #ffdedf;
			}

			.circle1 {
				width: 12rpx;
				height: 12rpx;
				margin: 0 12rpx;
			}

			.circle2 {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
</style>
